<template>
	<a-drawer title="详情" :width="800" :visible="visible" :destroy-on-close="true" :footer-style="{ textAlign: 'right' }"
		@close="onClose">
		<a-descriptions :column="1" size="middle" bordered class="mb-2" layout="vertical">
			<a-descriptions-item label="申请人：">{{ formData.createUserName || '暂无' }}</a-descriptions-item>
			<!-- <a-descriptions-item label="手机号">{{ formData.opIp }}</a-descriptions-item> -->
			<a-descriptions-item label="帮助标题：">{{ formData.subject }}</a-descriptions-item>
			<a-descriptions-item label="帮助内容：">
                <p v-html="formData.content"></p>
            </a-descriptions-item>
		</a-descriptions>
        
		<template #footer>
			<a-button style="margin-right: 8px" @click="onSubmit('2')" :loading="submitLoading">拒绝</a-button>
			<a-button type="primary" @click="onSubmit('3')" :loading="submitLoading">同意</a-button>
		</template>
	</a-drawer>
</template>

<script setup name="loginMessageDetail">
import { cloneDeep } from 'lodash-es'
import loginMessageApi from '@/api/biz/loginMessageApi'
// 默认是关闭状态
let visible = $ref(false)
// 表单数据
const formData = ref({})
const submitLoading = ref(false)
const emit = defineEmits({ successful: null })
// 打开抽屉
const onOpen = (record) => {
	visible = true
	formData.value = record
}
const subOk = (status) =>{
	const formDataParam = cloneDeep(formData.value)
	formDataParam.status = status
	loginMessageApi.loginMessageSubmitForm(formDataParam, !formDataParam.id)
		.then(() => {
			onClose()
			emit('successful')
		})
		.finally(() => {
			submitLoading.value = false
		})
}
const onSubmit = (status) => {
	submitLoading.value = true
	const { id } = formData.value
	loginMessageApi.loginMessageProcess({id}).then(res =>{
		subOk(status)
	}).finally(() => {
		submitLoading.value = false
	})
}
// 关闭抽屉
const onClose = () => {
	visible = false
}
// 调用这个函数将子组件的一些数据和方法暴露出去
defineExpose({
	onOpen
})
</script>
